<template>
  <view class="container">
    <view class="main" v-if="isLogin==false">
      <view class="title-1"> 请选择您的使用场景 </view>
      <view class="title-2">
        最多选择三种。（{{ selectedNum }} / {{ 3 }}）
      </view>
      <tag-cloud :tagnames="tagnames" :selected.sync="selected" />
      <button class="button" @click="handlerBtnClick" plain type="primary">
        我选好了
      </button>
    </view>
  </view>
</template>

<script>
import TagCloud from "../../components/TagCloud";
export default {
  name: "index",
  created() {
    this.$store
      .dispatch("getInfo")
      .then(() => {
        // 如果可以成功获取个人信息，表示 1.已注册，2.登陆未过期
        wx.redirectTo({
          url: "/pages/tab/index",
        });
      })
      // 表示获取个人信息失败，需要重新登陆
      .catch(() => {
        this.$store
          .dispatch("login")
          .then(() => {
            // 登陆成功后，再次获取个人信息。
            this.$store
              .dispatch("getInfo")
              .then(() => {
                wx.redirectTo({
                  url: "/pages/tab/index",
                });
              })
              .catch((err) => {
                console.log(err)
                // 需要初始化个人信息
                if (err.code === 20001) {
                  this.isLogin = false;
                } else {
                  console.error(err);
                }
              });
          })
          .catch((err) => {
            console.error(err);
          });
      });
  },
  data() {
    return {
      isLogin: true,
      selected: [],
      tagnames: [
        "学习",
        "运动",
        "暴打张一铭",
        "暴打赵浪",
        "抄编译原理作业",
      ],
      selectedNum: 0,
    };
  },
  watch: {
    selected() {
      this.selectedNum = this.selected.length;
    },
  },
  methods: {
    async handlerBtnClick() {
      const data = await wx.getUserProfile({ desc: '注册账号'});
      const { nickName, avatarUrl } = data.userInfo;
      const tag = [...this.selected];
      const allow_stop = true;
      const option = {
        nickname: nickName,
        head_image: avatarUrl,
        tag,
        allow_stop,
      };
      console.log(option);
      this.$store.dispatch("setInfo", option).then(() => {
        wx.redirectTo({
          url: "/pages/tab/index",
        });
      });
    },
  },
  components: {
    TagCloud,
  },
};
</script>

<style scoped>
.button {
  width: 100%;
  margin-top: 64px;
}
.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}
.container > .main {
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container > .main > .title-1 {
  font-weight: 600;
  font-size: 32px;
  margin-top: 82px;
}
.container > .main > .tag-cloud {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
}
.container > .main > .tag-cloud > .tag {
  margin-top: 8px;
  margin-left: 16px;
}

.container > .main > .more {
  display: flex;
  align-items: center;
  margin-top: 6px;
  width: 100%;
}
.container > .main > .more > .left,
.right {
  width: 100%;
  height: 1px;
  background: #1989fa;
}
.container > .main > .more > .middle {
  color: #1989fa;
  padding: 0 6px;
}
</style>